<template>
  <view class="personality-relation">
    <view class="title-img-box">
      <image class="title-img" :src="partTextImgUrl" />
    </view>
    <view class="content-wrapper">
      <view class="content">
        <view class="title-box">
          <view class="black-line"> </view>
          <view class="title-en"
            >了解人与人之间的性格，为你成长道路
            <text class="spe">添砖加瓦</text></view
          >
        </view>
        <view class="type-box">
          <view class="type-box-item">
            <view class="title-box">
              <view class="title">与你互补</view>
              <view class="line-bottom"></view>
            </view>
            <view class="up">
              <image
                class="up-img"
                :src="dataItem.complementary[0].url"
              ></image>
              <view class="type-name">
                <text class="text-en">{{
                  dataItem.complementary[0].label
                }}</text>
                <text class="text-cn">{{
                  dataItem.complementary[0].name
                }}</text>
              </view>
            </view>
            <view class="down mr40">
              <image
                class="down-img"
                :src="dataItem.complementary[1].url"
              ></image>
              <view class="type-name">
                <text class="text-en mb12">{{
                  dataItem.complementary[1].label
                }}</text>
                <text class="text-cn">{{
                  dataItem.complementary[1].name
                }}</text>
              </view>
            </view>
          </view>
          <view class="type-box-item">
            <view class="title-box ml40">
              <view class="title">与你合拍</view>
              <view class="line-bottom"></view>
            </view>
            <view class="up spe-right">
              <image class="up-img" :src="dataItem.coproduce[0].url"></image>
              <view class="type-name">
                <text class="text-en">{{ dataItem.coproduce[0].label }}</text>
                <text class="text-cn">{{ dataItem.coproduce[0].name }}</text>
              </view>
            </view>
            <view class="down spe-left">
              <image class="down-img" :src="dataItem.coproduce[1].url"></image>
              <view class="type-name">
                <text class="text-en mb12">{{
                  dataItem.coproduce[1].label
                }}</text>
                <text class="text-cn">{{ dataItem.coproduce[1].name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bg-img-box">
      <image class="bg-img" :src="bgImg"></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      partTextImgUrl:
        this.$imgBaseSelf + 'career/careerAssessNewImg/06_title.png',
      centerImg:
        this.$imgBaseSelf + 'career/careerAssessNewImg/06_center_img.png',
      bgImg: this.$imgBaseSelf + 'career/careerAssessNewImg/07_bg.png'
    };
  },
  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select('.personality-relation')
      .boundingClientRect((rect) => {
        this.$emit('listenRect', rect);
      })
      .exec();
  }
};
</script>

<style lang="scss" scoped>
.personality-relation {
  margin-top: 48rpx;
  position: relative;
  width: 100%;
  .title-img-box {
    display: flex;
    justify-content: flex-end;
    .title-img {
      height: 112rpx;
      width: 430rpx;
    }
  }

  .content-wrapper {
    margin: -14rpx 32rpx 0 32rpx;
    background: #fff;
    border-radius: 20rpx 0rpx 0rpx 0rpx;
    .content {
      padding: 53rpx 42rpx 42rpx 42rpx;
      background: linear-gradient(0deg, #ffffff 0%, #bff1b4 100%) no-repeat;
      border-radius: 20rpx 0rpx 0rpx 0rpx;
      border: 1px solid #ffffff;
      background-size: 100% 83rpx;
      .title-box {
        display: flex;
        align-items: center;
        position: relative;
        .black-line {
          width: 12rpx;
          height: 37rpx;
          background: #000000;
          position: absolute;
          left: -42rpx;
        }
        .title-en {
          font-family: Source Han Sans CN;
          font-weight: 600;
          font-size: 28rpx;
          color: #070701;
          .spe {
            color: #fe5808;
          }
        }
      }
      .type-box {
        display: flex;
        justify-content: space-between;
        margin-top: 43rpx;
        padding: 0 13rpx;
        background: url($img-base + 'career/careerAssessNewImg/06_center_img.png')
          no-repeat;
        background-size: 100% 99%;
        background-position: center bottom;
        .type-box-item {
          padding: 12rpx 0 0 0;
          width: 50%;
          .title-box {
            display: flex;
            align-items: center;
            position: relative;
            .title {
              font-weight: 600;
              font-size: 32rpx;
              color: #222222;
              position: absolute;
              z-index: 99;
            }
            .line-bottom {
              width: 122rpx;
              height: 9rpx;
              background: linear-gradient(89deg, #72e25a 0%, #ffffff 100%)
                no-repeat;
              position: absolute;
              bottom: -20rpx;
            }
          }
          .up {
            display: flex;
            align-items: center;
            margin-top: 64rpx;
            .up-img {
              width: 118rpx;
              height: 118rpx;
            }
          }
          .down {
            display: flex;
            justify-content: flex-end;
            margin: 47rpx 0 68rpx 48rpx;
            .down-img {
              width: 94rpx;
              height: 94rpx;
            }
          }
          .mr40 {
            margin-right: 40rpx;
          }
          .ml40 {
            margin-left: 40rpx;
          }
          .spe-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }
          .spe-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
          .type-name {
            display: flex;
            flex-direction: column;
            margin-left: 4rpx;
            .text-en {
              font-size: 32rpx;
              color: #222222;
              margin-bottom: 8rpx;
              font-weight: 600;
            }
            .text-cn {
              font-family: Source Han Sans CN;
              font-size: 26rpx;
              color: #999999;
            }
            .mb12 {
              margin-bottom: 8rpx;
            }
          }
        }
      }
    }
  }
  .bg-img-box {
    position: absolute;
    bottom: -128rpx;
    right: 0;
    z-index: 99;
    .bg-img {
      width: 345rpx;
      height: 178rpx;
    }
  }
}
</style>
